<template>
  <view class="bgColor">
    <view style="padding-bottom: 90rpx">
      <!--      <mine v-if="componentsName==='mine'"></mine>-->

      <view class="fab-content" >
        <uni-badge style="display: block;width: 72rpx;height: 72rpx;margin:auto" class="uni-badge-left-margin"
                   :text="msgNum" absolute="rightTop" size="small">
          <image src="/static/icon/homePage/msg.png"  @click="goMessage" class="fb-barge-button"
                 mode="scaleToFill"></image>
        </uni-badge>
        <image src="/static/icon/homePage/scan.png" v-if="user.userType=='user'" @click="scanRepair" class="fab-button" mode="scaleToFill"
               style="margin-top: 30rpx;"></image>
        <image src="/static/icon/homePage/hand.png" v-if="user.userType=='user'" @click="goRepair" class="fab-button" style="margin-top: 30rpx;"
               mode="scaleToFill"></image>
      </view>
<!--      <view class="fab-content" v-if="user.userType=='repairman'">-->
<!--        <uni-badge class="uni-badge-left-margin" :text="msgNum" absolute="rightTop" size="small">-->
<!--          <image src="/static/icon/homePage/msg.png" @click="goMessage" class="fb-barge-button"-->
<!--                 mode="scaleToFill"></image>-->
<!--        </uni-badge>-->
<!--      </view>-->
      <!-- 用户 -->
      <user-index ref="userIndex" :msgNum="msgNum" v-if="componentsName==='userIndex'"></user-index>
      <repair-order ref="repairOrder" v-if="componentsName==='userRepair'"></repair-order>

      <!--      维修员-->
      <repair-index ref="repairIndex" :msgNum="msgNum" v-if="componentsName==='repairIndex'"></repair-index>
      <repairman-order v-if="componentsName==='repairmanOrder'"></repairman-order>

      <Mine ref="mine" v-if="componentsName==='mine'"></Mine>
    </view>
    <!--tabBar-->
    <tab-bar style="height: 10vh;z-index: 10001;display: flex;  position: fixed;" :components-name="componentsName"
             v-on:receiveName="receiveName($event)"></tab-bar>
  </view>
</template>

<script>

import TabBar from "../../components/tabBar";
// import Mine from "../../public/mine/index"

import UserIndex from "../../normalUser/homePage/index"

import RepairOrder from "../../normalUser/repairOrder/index"
import Mine from "../mine"
import RepairIndex from "../../repair/homePage/index"
import RepairmanOrder from "../../repair/repairOrder/index"
import {Socket} from "../../../api/Socket";
import {MessageService} from "../message/messageService";

export default {
  name: "index",
  components: {
    TabBar,
    //admin
    Mine,
    RepairOrder, UserIndex,
    RepairIndex, RepairmanOrder,
  },
  data() {
    return {
      componentsName: '',
      user: uni.getStorageSync('userInfo').userInfo,
      msgNum: 0,
    }
  },
  //监听首页的onshow
  onShow() {
    uni.$emit('onShow');
    // if(this.user.userType=="repairman") {
    let socket = this.$store.state.socket
    let subscribe = "monitorMessage-" + this.user.eid
    socket.stompSubscribe(subscribe, (destination, body, headers) => {
      this.msgNum++;
    })
    this.getNotReadMessageNum();
    // }
  },
  onHide() {
    let socket = this.$store.state.socket
    let subscribe = "monitorMessage-" + this.user.eid
    socket.stompUnsubscribe(subscribe);
  },
  created() {
    this.componentsName = uni.getStorageSync("componentsName")
  },
  //上拉刷新
  onReachBottom() {
    // console.log("上拉刷新")
    uni.$emit('onReachBottom', "刷新数据");
  },
  // 下拉刷新
  onPullDownRefresh() {
    uni.$emit('pulldownRefresh')
  },
  methods: {
    getNotReadMessageNum() {
      MessageService.countNotReadNum(this.user.eid).then(res => {
        this.msgNum = res.data
      })
    },
    receiveName(name) {
      this.componentsName = name
    },
    goRepair() {
      // console.log("baoxiu","/pages/normalUser/public/repairApplication/index")
      uni.navigateTo({
        //保留当前页面，跳转到应用内的某个页面
        url: '/pages/normalUser/public/repairApplication/index'
      })
    },
    goMessage() {
      uni.navigateTo({
        //保留当前页面，跳转到应用内的某个页面
        url: '/pages/public/message/index'
      })
    },
    scanRepair() {
      uni.scanCode({
        success: function (res) {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
          let map = new Map();
          res.result.split(",").forEach(item => {
            let items = item.split(":");
            map.set(items[0], items[1])
          })
          if (!map.get("deviceCode")) {
            uni.showToast({
              title: '二维码错误',
              icon: 'none'
            });
            return
          }
          //跳转页面
          uni.navigateTo({
            //保留当前页面，跳转到应用内的某个页面
            url: '/pages/normalUser/public/repairApplication/index?deviceCode=' + map.get("deviceCode")
          })
        }
      });
    }
  },
  onPageScroll: function (e) {
    // uni.$on('need',()=>{
    //   uni.$emit('onPageScroll', e.scrollTop)
    // });
    uni.$emit('onPageScroll', e.scrollTop);
  },
  onUnload() {
    uni.$off('need');
  },

}
</script>

<style scoped>

.bgColor {

  background-color: #f8f8f8;
  height: 100vh;
}

.fab-content {
  position: fixed;
  /*background-color: #6a6a6a;*/
  width: 90rpx;
  min-height: 80rpx;
  height: auto;
  z-index: 1000;
  right: 42rpx;
  bottom: 180rpx;
}

.fab-button {
  width: 72rpx;
  height: 72rpx;
  margin: auto;
  display: block;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.fb-barge-button {
  width: 72rpx;
  height: 72rpx;
  margin: auto;
  display: block;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
</style>
